<template>
	<view class="content">
		<Seacrh />
		<swiper class="slide"
			indicator-dots
			autoplay
			circular
			easing-function="linear"
			indicator-active-color="#e75560"
			>
			<swiper-item v-for="item in slideshow" :key="item.goods_id">
				<image class="image" :src="item.image_src"></image>
			</swiper-item>
		</swiper>
		<view class="type">
			<navigator url="" v-for="(item,index) in navigation" :key="index">
				<image class="image" :src="item.image_src" mode=""></image>
			</navigator>
		</view>
		<view class="commodity" v-for="(item,index) in commodity" :key="index">
			<view class="commodity_top">
				<image class="image" :src="item.floor_title.image_src" mode=""></image>
			</view>
			<view class="commodity_bottom">
				<image class="image" v-for="(item1,index1) in item.product_list" :key="index1" :src="item1.image_src" mode=""></image>
			</view>
		</view>
	</view>
</template>

<script>
	import Seacrh from '@/components/search/search.vue'
	export default {
		components: {
			Seacrh,
		},
		data() {
			return {
				title: 'Hello',
				slideshow: [],
				navigation: [],
				commodity: [],
			}
		},
		onLoad() {
			this.get_slideshow()
			this.get_navigation()
			this.get_commodity_type()
		},
		methods: {
			get_slideshow() {
				uni.request({
					url: 'https://api-hmugo-web.itheima.net/api/public/v1/home/swiperdata',
				}).then(res=>{
					this.slideshow = res[1].data.message
				})
			},
			get_navigation(){
				uni.request({
					url: 'https://api-hmugo-web.itheima.net/api/public/v1/home/catitems'
				}).then(res=>{
					this.navigation = res[1].data.message
				})
			},
			get_commodity_type () {
				uni.request({
					url: 'https://api-hmugo-web.itheima.net/api/public/v1/home/floordata'
				}).then(res=>{
					this.commodity = res[1].data.message
				})
			}
		}
	}
</script>

<style lang="less" scoped>
	.content {
		.slide {
			.image {
				width: 750rpx;
				height: 340rpx;
			}
		}
		.type {
			margin: 10rpx 0;
			display: flex;
			justify-content: space-around;
			.image {
				width: 128rpx;
				height: 140rpx;
			}
		}
		.commodity {
			.commodity_top {
				image {
					width: 750rpx;
					height: 60rpx;
				}
			}	
			.commodity_bottom {
				widows: 750rpx;
				font-size: 0;
				.image {
					float: left;
					width: 232rpx;
					height: 188rpx;
					margin: 10rpx;
					&:nth-child(1) {
						height: 386rpx;
					}
					&:nth-child(4) {
						margin-top: 0;
					}
					&:nth-child(5) {
						margin-top: 0;
					}
				}
			}
		}
	}

</style>
